<template>
  <header>
    <div class="header-content" @mouseleave="isShow = false">
      <h1 class="content-logo">
        <img src="/public/img/logo1.png" />
      </h1>

      <div class="search-buy-login">
        <div class="content-login" v-if="!isLogin">
          <router-link to="/login"> 登录 </router-link>
        </div>
        <div class="content-login-success" v-else>
          <div @mouseenter="isShow = true">
            <img
              class="avator"
              :src="userInfo.avatar"
              alt=""
              v-if="userInfo.avatar"
            />
            <img v-else class="avator" src="/public/img/touxiang.png" />
          </div>
          <el-dropdown>
            <span class="el-dropdown-link" style="font-size: 18px">
              {{ userName }}
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus"
                  ><div @click="goLogout">退出登录</div></el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { onBeforeMount } from "vue";
import { creatToken } from "../../utils/api/createToken";
import { getInfo } from "../../utils/api/login";
import { useUserStore } from "../../store/user";
import { Decrypt } from "../../utils/aes";
const userStore = useUserStore();
let router = useRouter();
let isLogin = ref(false);
let userInfo = ref({});
let isShow = ref(false);
const userName = ref("");
// 发请求获取用户信息 如果有该头像，没有用默认
onBeforeMount(() => {
  // 判断是否登录 token
  let username = localStorage.getItem("username");
  if (username) {
    userName.value = Decrypt(username);
    isLogin.value = true;
  }

  // creatToken().then((res) => {
  //   let token = res.data.token;
  //   getInfo({ token }).then((res) => {
  //     // 获取到用户信息
  //     if (res.meta.code == "200") {
  //       userInfo.value = res.data.data;
  //       // pinia存储用户信息
  //       useUserStore().userInfo = res.data.data;
  //       isLogin.value = true;
  //     }
  //   });
  // });
});

// goLogout
const goLogout = () => {
  ElMessageBox.confirm("确定退出登录吗?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      ElMessage.success({
        message: "退出成功!",
      });
      userStore.clearToken();
      // 清空所有本地缓存

      localStorage.clear();

      // 刷新页面
      router.go(0);
    })
    .catch(() => {
      ElMessage.info({
        message: "已取消",
      });
    });
};

// goCart
const goCart = () => {
  router.push("/cart");
};
</script>

<style scoped>
header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.16);
}
.header-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 1400px;
}
.content-logo {
  width: 160px;
  height: 55px;
  margin: 10px 0;
  cursor: pointer;
}
.content-logo img {
  height: 100%;
}
.content-nav {
  width: 300px;
  height: 75px;
}
.content-nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 75px;
}
.content-nav ul li {
  font-size: 18px;
  color: #808080;
  cursor: pointer;
}
.content-nav ul li a {
  font-size: 18px;
  color: #808080;
  cursor: pointer;
  text-decoration: none;
}
.search-buy-login {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-login a {
  font-size: 18px;
  color: #808080;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.content-login-success {
  height: 53px;
  color: #808080;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #707070;
}
.avator {
  height: 53px;
  width: 53px;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 10px;
}
</style>
